<template>
  <el-container class="teacherCenter">
    <el-header>
      <m-header />
    </el-header>
    <el-container>
      <el-aside width="230px">
        <Menu class="menu" />
      </el-aside>
      <el-container>
        <Title class="title" />
        <el-main ref="main">
          <router-view></router-view>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import { Container, Header, Footer, Main, Aside } from "element-ui";
import MHeader from "./components/Header";
import Title from "./components/Title";
import Menu from "./components/Menu";
export default {
  components: {
    ElContainer: Container,
    ElHeader: Header,
    ElFooter: Footer,
    ElMain: Main,
    ElAside: Aside,
    MHeader,
    Menu,
    Title
  },
  data() {
    return {
      isCollapse: true
    };
  },
  computed: {
    loginStatus() {
      return this.$store.state.login.loginStatus;
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      // eslint-disable-next-line no-console
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // eslint-disable-next-line no-console
      console.log(key, keyPath);
    }
  }
};
</script>

<style lang="scss" scoped>
.el-header {
  position: fixed;
  width: 100vw;
  z-index: 5;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-footer {
  height: 70px;
}

.el-aside {
  position: relative;
  padding: 20px 0;
  background-color: rgb(250, 255, 249);
  color: #333;
  text-align: center;
  overflow: visible;
  .menu {
    overflow: auto;
    position: fixed;
    top: 100px;
    width: 230px;
    z-index: 4;
  }
}

.el-main {
  box-sizing: border-box;
  overflow-y: hidden;
  overflow-x: hidden;
  color: #333;
  text-align: center;
  padding: 10px 20px;
}

.teacherCenter {
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100vh;
  width: 100vw;
  .el-container {
    box-sizing: border-box;
    padding-top: 30px;
    overflow: visible;
    background-color: rgb(250, 255, 249);
    .title {
      position: relative;
      z-index: 3;
      height: 80px;
      box-shadow: -10px 11px 12px -12px rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
